import React from 'react';

export class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    // setState 是异步的

    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      });
      this.setState({
        count: this.state.count + 1,
      });
    }, 0);

    // this.setState(
    //   (state) => {
    //     // 当前修改最新的state
    //     return {
    //       count: state.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log('这个回调函数会在DOM更新后执行1');
    //   }
    // );
  };

  // 同样的需求也可以写在 componentDidUpdate 钩子函数中
  componentDidUpdate() {
    console.log('这个回调函数会在DOM更新后执行2');
  }

  render() {
    console.log('render');
    return (
      <div>
        <h3>{this.state.count}</h3>

        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}
